import React, { Component } from 'react'
import GoBack from '@/components/TheGoBack'
import '@/views/commodity/style/style.less'
import { Button, Table } from 'antd'
import TheImage from '@/components/TheImage'
import { apiGetStandOrderDetail } from '@/request/cashier'
import _ from 'lodash'
import axios from 'axios'

export default class CancelOrderDetails extends Component {
  state = {
    basicData: [],
    columns: [
      {
        title: "商品信息",
        width: 600,
        render: (text, record) => {
          let style = {
            width: 200,
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis'
          }
          return (
            <div style={{ display: "flex", alignItems: "center" }}>
              <TheImage
                src={record.productImage}
                width={100}
              />
              <div style={{ margin: "0 10px" }}>{record.productName}</div>
              <div>{record.sku}</div>
            </div>
          );
        },
      },
      {
        title: "单价",
        dataIndex: "orderPrice",
        key: "orderPrice",
        render: (text) => <React.$price price={text || 0} />,
      },
      {
        title: "商品数量",
        dataIndex: "orderProductCount",
        key: "orderProductCount",
        render: (text) => text || 0,
      },
      {
        title: "合计",
        dataIndex: "orderPriceTotal",
        key: "orderPriceTotal",
        render: (text, record) => {
          return <div>
            <React.$price color="red" price={text || 0} />
          </div>
        },
      },
    ],
    dataSource: [],
    serviceData: [],
    serviceColumns: [
      {
        title: '服务名称',
        dataIndex: 'productName',
        key: 'productName'
      },
      {
        title: '价格',
        dataIndex: 'orderPrice',
        key: 'orderPrice',
        render: (text, record) => {
          return <React.$Price price={text || 0} />
        }
      },
    ],
    otherColumns: [
      {
        title: '备注',
        dataIndex: 'orderProductRemark',
        key: 'orderProductRemark'
      },
      {
        title: '金额',
        dataIndex: 'orderPrice',
        key: 'orderPrice',
        render: (text, record) => {
          return <React.$Price price={text || 0} />
        }
      }
    ],
    printData: []
  }
  componentDidMount() {
    this.getData()
  }
  getData = async () => {
    const { id } = this.props.match.params
    let res = await apiGetStandOrderDetail({ orderId: id })
    if (res.data && res.code === 0) {
      let data = res.data
      let basicData = [
        {
          text: '订单编号',
          value: data.orderCode
        },
        {
          text: '订单时间',
          value: data.createTime
        },
        {
          text: '用户昵称',
          value: data.orderMemberName || '无'
        },
        {
          text: '收款人员',
          value: data.cashierName
        },
      ]
      
      let dataSource = data.standProductList.map(v => {
        let productSkuJson = JSON.parse(v.productSkuJson)
        let sku = productSkuJson.skuAttribute.map(k => k.product_value)
        return {
          ...v,
          sku
        }
      })
      let serviceData = data.standServiceList
      let otherData = data.standOtherList
      let printData = res.data
      this.setState({
        basicData,
        dataSource,
        serviceData,
        otherData,
        printData
      })
    }
  }
  print = () => {
    const { printData } = this.state
    let token = sessionStorage.getItem('RSnetToken')
    axios.post('http://localhost:8888/admin/bill/print', { ...printData }, {
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
        'RSnetToken': token,
        'Accept': '*/*'
      }
    })
  }
  render() {
    const { basicData, columns, dataSource, serviceData, serviceColumns, otherData, otherColumns } = this.state
    return (
      <div className="p-layout-box commodity-list-detail">
        <GoBack history={this.props.history} title={"订单详情"} />
        <div className="detail-content">
          <div className="commodity-card">
            <div className="title" style={{ position: 'relative' }}>
              <span>基本信息</span>
            </div>
            <div className="content basic" style={{ padding: '20px 60px' }}>
              {basicData.map((v, i) => {
                return (
                  <div>
                    <p style={{ minWidth: 90 }}>{v.text}:</p>
                    <div>{v.value}</div>
                  </div>
                );
              })}
            </div>
          </div>
          {!_.isEmpty(dataSource) && <div className="commodity-card">
            <div className="title">商品列表</div>
            <div className="content">
              <Table
                dataSource={dataSource}
                columns={columns}
                pagination={false}
                summary={(pageData) => {
                  let totalOrderPriceTotal = 0;
                  let totalOrderProductCount = 0;
                  pageData.forEach(
                    ({ orderPriceTotal, orderProductCount, integral }) => {
                      totalOrderPriceTotal += orderPriceTotal || 0;
                      totalOrderProductCount += orderProductCount || 0;
                    }
                  );
                  return (
                    <>
                      <Table.Summary.Row>
                        <Table.Summary.Cell colSpan={24}>
                          <div style={{ textAlign: "center" }}>
                            {`共${totalOrderProductCount}件商品，总计：`}
                            <React.$price color="red" price={totalOrderPriceTotal || 0} />
                          </div>
                        </Table.Summary.Cell>
                      </Table.Summary.Row>
                    </>
                  );
                }}
              />
            </div>
          </div>}
          {!_.isEmpty(serviceData) && <div className="commodity-card">
            <div className="title">服务列表</div>
            <div className="content">
              <Table
                dataSource={serviceData}
                columns={serviceColumns}
                pagination={false}
                summary={(pageData) => {
                  let totalOrderPriceTotal = 0;
                  let totalOrderProductCount = 0;
                  pageData.forEach(
                    ({ orderPriceTotal, orderProductCount }) => {
                      totalOrderPriceTotal += orderPriceTotal || 0;
                      totalOrderProductCount += orderProductCount || 0;
                    }
                  );
                  return (
                    <>
                      <Table.Summary.Row>
                        <Table.Summary.Cell colSpan={24}>
                          <div style={{ textAlign: "center" }}>
                            {`共${totalOrderProductCount}项服务，总计：`}
                            <React.$price color="red" price={totalOrderPriceTotal || 0} />
                          </div>
                        </Table.Summary.Cell>
                      </Table.Summary.Row>
                    </>
                  );
                }}
              />
            </div>
          </div>}
          {!_.isEmpty(otherData) && <div className="commodity-card">
            <div className="title">其他服务</div>
            <div className="content">
              <Table
                dataSource={otherData}
                columns={otherColumns}
                pagination={false}
              />
            </div>
          </div>}
        </div>
      </div>
    )
  }
}
